import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:netflix_social/constants/app_constants.dart';
import 'package:netflix_social/models/video.dart';
import 'package:netflix_social/theme/app_theme.dart';

class HeroContent extends StatelessWidget {
  final Video video;

  const HeroContent({
    Key? key,
    required this.video,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      margin: const EdgeInsets.only(bottom: 16),
      child: Stack(
        children: [
          // 背景图片
          Positioned.fill(
            child: CachedNetworkImage(
              imageUrl: video.thumbnailUrl,
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(
                color: Colors.grey[900],
                child: const Center(
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(AppTheme.netflixRed),
                  ),
                ),
              ),
              errorWidget: (context, url, error) => Container(
                color: Colors.grey[900],
                child: const Center(
                  child: Icon(Icons.error, color: Colors.white),
                ),
              ),
            ),
          ),
          
          // 渐变遮罩
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.transparent,
                    Colors.black.withOpacity(0.6),
                    Colors.black.withOpacity(0.9),
                  ],
                  stops: const [0.5, 0.8, 1.0],
                ),
              ),
            ),
          ),
          
          // 内容
          Positioned(
            bottom: 32,
            left: 16,
            right: 16,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 类别标签
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    color: AppTheme.netflixRed,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    _getContentType(video),
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                    ),
                  ),
                ),
                
                const SizedBox(height: 12),
                
                // 标题
                Text(
                  video.title,
                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                
                const SizedBox(height: 8),
                
                // 元数据
                Row(
                  children: [
                    _buildMetadata('${video.year}'),
                    _buildDot(),
                    _buildMetadata('${video.rating}分'),
                    _buildDot(),
                    _buildMetadata('${video.duration}分钟'),
                  ],
                ),
                
                const SizedBox(height: 8),
                
                // 标签
                Wrap(
                  spacing: 8,
                  children: video.tags.map((tag) => Text(
                    tag,
                    style: TextStyle(
                      color: Colors.grey[400],
                      fontSize: 14,
                    ),
                  )).toList(),
                ),
                
                const SizedBox(height: 16),
                
                // 简介
                Text(
                  video.description,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.grey[300],
                    fontSize: 14,
                  ),
                ),
                
                const SizedBox(height: 20),
                
                // 按钮
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 播放按钮
                    Expanded(
                      child: ElevatedButton.icon(
                        icon: const Icon(Icons.play_arrow),
                        label: const Text('播放'),
                        onPressed: () {
                          Navigator.pushNamed(
                            context,
                            AppConstants.playerRoute,
                            arguments: {
                              'videoId': video.id,
                              'isOffline': false,
                            },
                          );
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.white,
                          foregroundColor: Colors.black,
                          padding: const EdgeInsets.symmetric(vertical: 12),
                        ),
                      ),
                    ),
                    
                    const SizedBox(width: 16),
                    
                    // 我的列表按钮
                    Expanded(
                      child: ElevatedButton.icon(
                        icon: const Icon(Icons.add),
                        label: const Text('我的列表'),
                        onPressed: () {
                          // 添加到我的列表
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.grey[800],
                          foregroundColor: Colors.white,
                          padding: const EdgeInsets.symmetric(vertical: 12),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  String _getContentType(Video video) {
    // 根据视频的类别返回内容类型
    if (video.category.toLowerCase().contains('电影')) {
      return '电影';
    } else if (video.category.toLowerCase().contains('剧') || 
               video.category.toLowerCase().contains('serie')) {
      return '电视剧';
    } else if (video.category.toLowerCase().contains('动漫')) {
      return '动漫';
    } else if (video.category.toLowerCase().contains('纪录')) {
      return '纪录片';
    } else {
      return '热门';
    }
  }

  Widget _buildMetadata(String text) {
    return Text(
      text,
      style: TextStyle(
        color: Colors.grey[400],
        fontSize: 14,
      ),
    );
  }

  Widget _buildDot() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 6),
      child: Text(
        '•',
        style: TextStyle(
          color: Colors.grey[400],
          fontSize: 14,
        ),
      ),
    );
  }
}
